<template>
  <div class="page-box">
      <el-row class="page-box-item">
          <el-col :span="4" style="padding-left: 5px; padding-right: 5px;">

              <el-card shadow="never"  style="border:none;border-right: 1px solid #f1f1f1;">
                  <el-input placeholder="过滤" v-model="filterText" style="margin-bottom: 10px;"></el-input>
                  <el-tree :data="ItemTypeData" :props="defaultProps" @node-click="handleNodeClick" ref="tree"
                      :filter-node-method="filterNode"></el-tree>
              </el-card>
          </el-col>
          <el-col :span="20" style="padding-left: 5px; padding-right: 5px;">
              <div class="page-search">
                  <div>
                      <label>物料编码</label>
                      <el-input v-model="searchForm.ItemCode" style="width: 160px;" placeholder="请输入物料编码"></el-input>
                  </div>
                  <div>
                      <label>物料名称</label>
                      <el-input v-model="searchForm.ItemName" style="width: 160px;" placeholder="请输入物料名称"></el-input>
                  </div>
                  <div>
                      <el-button type="primary" @click="search">搜索</el-button>
                      <el-button @click="reset">重置</el-button>
                  </div>
              </div>



              <div class="page-section">
                  <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
                      <el-table-column type="selection" width="55"></el-table-column>
                      <el-table-column prop="ItemCode" label="物料编码" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="ItemName" label="物料名称" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="Model" label="型号" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="Vendor" label="供应商" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="LineType" label="线别" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="EffectiveDate" label="有效日期" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="Kind" label="品类" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="PurchasePrice" label="采购价" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="SalePrice" label="销售价" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="ItemOrProduct" label="物料/产品" :show-overflow-tooltip="true"></el-table-column>
                      <el-table-column prop="ItemTypeName" label="所属分类" :show-overflow-tooltip="true"></el-table-column>



                      <el-table-column prop="EnableFlag" label="是否启用" :show-overflow-tooltip="true">
                          <template slot-scope="scope">
                              <el-tag type="success" v-if="scope.row.EnableFlag === 'Y'">是</el-tag>
                              <el-tag type="warning" v-else>否</el-tag>
                          </template>
                      </el-table-column>
                      <el-table-column prop="SafeStockFlag" label="安全库存" :show-overflow-tooltip="true">
                          <template slot-scope="scope">
                              <el-tag type="success" v-if="scope.row.SafeStockFlag === 'Y'">是</el-tag>
                              <el-tag type="warning" v-else>否</el-tag>
                          </template>
                      </el-table-column>

                      <el-table-column prop="CreateTime" label="创建时间" :show-overflow-tooltip="true"></el-table-column>
                  </el-table>


                  <Pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                      :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize"
                      :TotalCount="pageDomain.TotalCount" />
              </div>
            <div class="page-box-footer">
                <el-button type="primary" @click="checked" >确认选择</el-button>
            </div>
          </el-col>
      </el-row>


  </div>
</template>
<script>


import Pagination from '@/components/Pagination.vue';
export default {
props:{
    BomList:{
        type:Array,
        required:false
    },
    
    IsBom:{
        type:Boolean,
        required:false,
        default:false
    },
    IsFirst:{
        type:Boolean,
        required:false,
        default:false
    }
},  
  components: {
      Pagination
  },
  mounted() {
      this.dataBind();

      this.getItemType();
  },
  watch: {
      filterText(val) {
          this.$refs.tree.filter(val);
      }
  },
  data() {
      return {

          filterText: '',
          //搜索字段
          searchForm: {
              ItemCode: '',
              ItemName: '',
              ItemTypeId:-1
          },
          ItemTypeData: [],
          defaultProps: {
              children: 'Children',
              label: 'ItemTypeName'
          },



          pageDomain: {
              PageIndex: 1,
              PageSize: 10,
              TotalCount: 0
          },
          tableData: [],
          isLoading: false


      }
  },
  methods: {
      filterNode(value, data) {
          if (!value) return true;
          return data.ItemTypeName.indexOf(value) !== -1;
      },
      checked(){



        //获取选中的每一项

        if(this.$refs.dataForm.selection.length<=0){
            this.showNotify('请选择一项');
            return;
        }

        //只能选一条
        else if(this.IsFirst && this.$refs.dataForm.selection.length>1){
            this.showNotify('只能选一项');
            return;
        }



        if(this.IsFirst){

            let model = this.$refs.dataForm.selection[0];
            if(this.IsBom){

                var obj = new Object();
                //处理所需字段
                this.$set(obj,'BomItemId',model.Id);
                this.$set(obj,'BomItemCode',model.ItemCode);
                this.$set(obj,'BomItemName',model.ItemName);
                this.$set(obj,'BomItemSpec',model.Spec);
                this.$set(obj,'UnitOfMeasure',model.UnitOfMeasure);
                this.$set(obj,'ItemOrProduct',model.ItemOrProduct);
                this.$set(obj,'Quantity',1.0);

                if(this.BomList){
                    this.BomList.push(obj);
                }
                this.$emit('callback',obj);
            }
            else{
                if(this.BomList){
                    this.BomList.push(model);
                }
                this.$emit('callback',model);
            }
            return 
        }

        this.$refs.dataForm.selection.map(model=>{
            var arr = this.BomList.filter(x=>x.BomItemId==model.Id);
            if(arr.length <=0){

                if(this.IsBom){

                    var obj = new Object();
                    //处理所需字段
                    this.$set(obj,'BomItemId',model.Id);
                    this.$set(obj,'BomItemCode',model.ItemCode);
                    this.$set(obj,'BomItemName',model.ItemName);
                    this.$set(obj,'BomItemSpec',model.Spec);
                    this.$set(obj,'UnitOfMeasure',model.UnitOfMeasure);
                    this.$set(obj,'ItemOrProduct',model.ItemOrProduct);
                    this.$set(obj,'Quantity',1.0);
                    this.BomList.push(obj);
                }
                else{
                    this.BomList.push(model);
                }
            }
           
        })


        

        this.$emit('callback');
      },



      search() {
          this.pageDomain.PageIndex = 1;
          this.dataBind();
      },
      reset() {
          this.searchForm.ItemCode = '';
          this.searchForm.ItemName = '';
          this.searchForm.ItemTypeId=-1;
      },

      //获取数据
      dataBind() {
          this.isLoading = true;
          this.$http.get('/api/Item',
              {
                  params: {
                      PageIndex: this.pageDomain.PageIndex,
                      PageSize: this.pageDomain.PageSize,
                      ItemCode: this.searchForm.ItemCode,
                      ItemName: this.searchForm.ItemName,
                      ItemTypeId:this.searchForm.ItemTypeId
                  }
              })
              .then(res => {
                  this.tableData = res.Data;
                  this.pageDomain.TotalCount = res.Count;
                  this.isLoading = false;
              })
      },
      getItemType() {
          this.$http.get('/api/ItemType')
              .then(res => {
                  this.ItemTypeData = res.Data;
                  this.ItemTypeData.unshift({ Id: -1, ItemTypeName: '全部' });
              })
      },
      handleNodeClick(data) {
          this.searchForm.ItemTypeId = data.Id;
          this.dataBind();
      },
      //分页方法
      handleSizeChange(val) {
          this.pageDomain.PageIndex = 1;
          this.pageDomain.PageSize = val;
          this.dataBind();
      },
      handleCurrentChange(val) {
          this.pageDomain.PageIndex = val;
          this.dataBind();
      },



  }
}
</script>